window.onload = function() {
    var dropbox = document.getElementById("dropbox");
    dropbox.addEventListener("dragenter", noop, false);
    dropbox.addEventListener("dragexit", noop, false);
    dropbox.addEventListener("dragover", noop, false);
    dropbox.addEventListener("drop", dropUpload, false);
};

function noop(event) {
    event.stopPropagation();
    event.preventDefault();
}

function dropUpload(event) {
    noop(event);
    var files = event.dataTransfer.files;

    for (var i = 0; i < files.length; i++) {
        upload(files[i]);
    }
}

function upload(file) {
    document.getElementById("status").innerHTML = "Uploading " + file.name;

    var formData = new FormData();
    formData.append("file", file);

    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.open("POST", "fileupload.htm", false); // If async=false, then you'll miss progress bar support.
    xhr.send(formData);
}

function uploadProgress(event) {
    // Note: doesn't work with async=false.
    var progress = Math.round(event.loaded / event.total * 100);
    document.getElementById("status").innerHTML = "Progress " + progress + "%";
}

function uploadComplete(event) {
    document.getElementById("status").innerHTML = event.target.responseText;
};